import React,{useEffect,useState} from 'react'
import { Menu } from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'
import { useNavigate,useLocation} from 'react-router-dom';
export default function Aside() {

  const navigate = useNavigate()
  const location = useLocation()
  const [defaultkey,setdefaultkey] = useState('')

  useEffect(()=>{
  //  console.log( location.pathname);
  let path = location.pathname
  // console.log(path.split('/')[1]);
  let key = path.split('/')[1]
  setdefaultkey(key)
  },[location.pathname])

  const onClick = (e) => {
    // console.log('/'+e.key);
    navigate('/'+e.key)
    setdefaultkey(e.key)
  };

  return (
    <Menu
    onClick={onClick}
    style={{width: 160,}}
    selectedKeys={[defaultkey]}
    mode="inline"
    theme='dark'
    className='aside'
   >
  <Menu.Item key='listtable'>  <AppstoreOutlined /> 查看文章列表table </Menu.Item>
  <Menu.Item key='listlist'>  <AppstoreOutlined /> 查看文章列表list </Menu.Item>
   <Menu.Item key='edit'> <MailOutlined/> 文章编辑 </Menu.Item>
   <Menu.Item key='means'> <SettingOutlined/> 修改资料 </Menu.Item>
  </Menu>
  );
}
